<template>
  <div class="CreateNote u-absolute-flex-column">
    <header class="app-header">
      <div class="u-flex-row">
        <a class="back-button" @click="goBack()"><i class="el-icon-arrow-left"></i></a>
        <div class="menu-text u-elastic">{{ id ? 'Editing Note' : 'Create Note' }}</div>
      </div>
    </header>
    <ul class="u-scroller">
      <div class="note-create-form">
        <el-input
          type="textarea"
          autosize
          placeholder="Enter note content"
          v-model="note.title">
        </el-input>
      </div>
    </ul>
    <div class="app-controls">
      <div class="u-flex-row">
        <el-button type="primary" class="u-elastic" @click="saveNote()">Save</el-button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ['id'],
  data() {
    return {
      note: {},
      noteIndex: -1,
    };
  },
  methods: {
    saveNote() {
      this.$router.push('/');
    },
    loadNote() {
      this.note = { title: 'A new note', meta: 'Added 2 days ago', id: '1' };
    },
    goBack() {
      this.$router.push('/');
    },
  },
  mounted() {
    if (this.id) {
      this.loadNote();
    }
  },
};
</script>

<style>
.note-create-form {
  padding: 20px 16px;
}

.el-textarea__inner {
  border: none;
}
</style>